<template>
    <div id="outInVenueManage">
        <div class="breadcrumb">
            <img src="../../../../static/img/venueManage_1.png" class="head_img">
            <span class="title">出入场管理</span>
        </div>
        <div class="list">
            <div class="list_head">
                <span>出入场管理</span>
                <span class="record" @click="getRecords()">出入记录</span>
            </div>
            <div class="search">
                <el-input class="search-input" @keyup.enter.native="searchOrder" v-model="verifyCode" placeholder="请输入验证码"></el-input>
                <el-button type="primary" icon="search" @click="searchOrder()">搜索</el-button>
            </div>
        </div>
        <el-dialog title="提示" style="width:60%;margin: 0 auto;" :visible.sync="dialogFormVisible">
            <div style="text-align: center;line-height:30px;">
                <h4 style="font-size:16px;">{{detail.failedTitle}}</h4>
                <span>{{detail.content}}</span>
                <p v-if="detail.bookDate">预约时间：{{detail.bookDate}}</p>
                <p v-if="detail.nowDate">当前时间：{{detail.nowDate}}</p>
                <div v-if="detail.orderItems">
                    <span style="vertical-align:top;">预约场地：</span>
                    <div style="display:inline-block;">
                        <span v-for="(item,index) in detail.orderItems" :key="index">{{item.sheetName}} {{item.startHour}}-{{item.endHour}}
                            <br>
                        </span>
                    </div>
                </div>
            </div>
            <div slot="footer" style="text-align: center;">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="订单信息" style="width:60%;margin: 0 auto;" :visible.sync="orderDetailVisible">
            <div class="orderInfo">
                <span class="orderInfo-item">姓&#x3000;&#x3000;名&#x3000;{{detail.name}}</span>
                <span class="orderInfo-item">身&#x3000;&#x3000;份&#x3000;{{detail.identifyName}}</span>
                <span class="orderInfo-item">手&nbsp;&nbsp;机&nbsp;&nbsp;号&#x3000;{{detail.phone}}</span>
                <span class="orderInfo-item">订&nbsp;&nbsp;单&nbsp;&nbsp;号&#x3000;{{detail.orderCode}}</span>
                <span class="orderInfo-item">预约时间&#x3000;{{detail.date}} {{calcWeek(detail.date)}}</span>
                <span class="orderInfo-item">预约场馆&#x3000;{{detail.venueName}}</span>
                <span class="orderInfo-item">预约场地&#x3000;{{detail.fieldName}}</span>
                <div class="orderInfo-item">
                    <span class="">场地信息&#x3000;</span>
                    <span v-for="(item,index) in detail.orderItems" :key="index" :class="{lastitem:index>0}">{{item.sheetName}} {{item.startHour}} - {{item.endHour}}
                        <br>
                    </span>
                </div>
                <div slot="footer" style="text-align: center;padding-top:20px;">
                    <el-button type="primary" @click="makeSureToEntrance()">确认入场</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
        data() {
            return {
                detail: {},
                verifyCode: '',
                isSearch: false,
                dialogFormVisible: false,
                orderDetailVisible: false
            }
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //询订单信息
            getConfigList() {
                let url = this.$util.domain + '/erp/api/v20/inout/checkverifycode';
                this.detail = {};

                this.$http({
                    url,
                    method: 'GET',
                    params: {
                        verifyCode: this.verifyCode
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let isSuccess = response.data.data.success;
                        if (isSuccess) {
                            this.orderDetailVisible = true;
                            this.detail = response.data.data.successDTO;
                        } else {
                            this.dialogFormVisible = true;
                            this.detail = response.data.data.failedDTO;
                        }
                    } else {
                        this.$util.errorMsg("网络繁忙，请刷新后重试！");
                    }
                })
            },
            // 入场确定
            checkinOrder() {
                let url = this.$util.domain + '/erp/api/v20/inout/checkin';

                this.$http({
                    url,
                    method: 'POST',
                    body: JSON.stringify({
                        phone: this.detail.phone,
                        orderCode: this.detail.orderCode
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        // 成功入场
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            },

            getRecords() {
                location.href = '/#/outInRecord';
            },
            searchOrder() {
                // 搜索
                let verifyCode = this.verifyCode.trim();
                if (verifyCode.length < 1) {
                    this.$util.errorMsg("验证码不能为空");
                    return;
                }
                this.getConfigList();
            },
            makeSureToEntrance() {
                // 确认入场
                this.orderDetailVisible = false;
                this.checkinOrder();
            },
            openDialog() {
                this.dialogFormVisible = true;
            },
            calcWeek(date) {
                let day = new Date(date).getDay();
                switch (day) {
                    case 1:
                        day = '星期一';
                        break;
                    case 2:
                        day = '星期二';
                        break;
                    case 3:
                        day = '星期三';
                        break;
                    case 4:
                        day = '星期四';
                        break;
                    case 5:
                        day = '星期五';
                        break;
                    case 6:
                        day = '星期六';
                        break;
                    case 0:
                        day = '星期日';
                        break;
                }
                return day;
            }
        }
    }

</script>

<style scoped>
    #outInVenueManage {
        vertical-align: top;
        padding-top: 80px;
        height: calc(100% - 100px);
        overflow: hidden;
    }

    .record {
        position: absolute;
        right: 20px;
        border-radius: 0;
        color: #0398FF;
        width: 80px;
        line-height: 36px;
        height: 36px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
    }

    .search {
        width: 60%;
        padding-top: 30px;
        margin: 0 auto;
    }

    .search-input {
        width: 80%;
        margin-bottom: 10px;
    }

    .orderInfo {
        margin: 0 auto;
    }

    .orderInfo-item {
        display: block;
        font-size: 14px;
        padding: 5px 10px
    }

    .lastitem {
        padding-left: 70px;
    }
</style>